<template>
  <!-- 顶部提示框 -->
  <div
    v-if="alertMessage"
    :class="['alert', alertType, 'alert-dismissible', 'fade', 'show', 'alert-left']"
    role="alert"
    style="
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1050;
      width: 100%;
      max-width: 600px;
    "
  >
    <span
      class="alert-inner--icon"
      sytle="margin-left: 0px"
    >
      <i :class="alertIcon" />
    </span>
    <span class="alert-inner--text">
      <strong>{{ alertTitle }}</strong> {{ alertMessage }}
    </span>
    <button
      type="button"
      class="close"
      @click="clearAlert"
    >
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbar_example_1"
      aria-controls="navbar_example_1"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon" />
    </button>
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav d-flex w-100">
        <li class="nav-item nav-item-divider w-25 text-center">
          <router-link
            class="nav-link"
            :to="`/course/${props.courseId}/info`"
          >
            课程信息
          </router-link>
        </li>
        <li class="nav-item nav-item-divider w-25 text-center">
          <router-link
            class="nav-link"
            :to="`/course/${props.courseId}/exercise`"
          >
            作业测试
          </router-link>
        </li>
        <li class="nav-item nav-item-divider w-25 text-center position-relative">
          <a
            id="materialDropdown"
            class="nav-link dropdown-toggle"
            href="#"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            教学资料
          </a>

          <div
            class="dropdown-menu text-center"
            aria-labelledby="materialDropdown"
            style="min-width: 0; width: 100%; left: 0; right: 0"
          >
            <router-link
              class="dropdown-item"
              :to="`/course/${props.courseId}/material/by-chapter`"
            >
              按章节分类
            </router-link>
            <div class="dropdown-divider" />
            <router-link
              class="dropdown-item"
              :to="`/course/${props.courseId}/material/by-type`"
            >
              按文件类型分类
            </router-link>
            <div class="dropdown-divider" />
            <router-link
              class="dropdown-item"
              :to="`/course/${props.courseId}/material/by-label`"
            >
              按标签分类
            </router-link>
          </div>
        </li>

        <li class="nav-item nav-item-divider w-25 text-center">
          <a
            class="nav-link"
            href="#"
            @click.prevent="handleMyClass"
          >我的班级</a>
        </li>
        <li class="nav-item nav-item-divider w-25 text-center">
          <a
            class="nav-link"
            href="#"
            @click.prevent="handleManageCourse"
          >管理课程</a>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script setup>
  const props = defineProps(['courseId'])
  import { onMounted } from 'vue'
  import { ref } from 'vue'
  import axios from 'axios'
  import { useRoute } from 'vue-router'
  import { useRouter } from 'vue-router'
  import { useUserStore } from '@/stores/userStore'
  const alertMessage = ref('')
  const alertType = ref('alert-success') // Bootstrap class：'alert-danger'等
  const alertTitle = ref('Success!')
  const alertIcon = ref('fas fa-check') // 默认图标 ✅

  const userRole = ref('') // 保存后端返回的角色
  const route = useRoute()
  const router = useRouter()
  const courseId = route.params.id
  const userStore = useUserStore()
  const userId = userStore.user?.userId || ''
  async function fetchUserRole() {
    try {
      const { exerciseAPI } = await import('@/api/exercise')
      const res = await exerciseAPI.getUserRole(courseId, userId)
      userRole.value = res.data
      console.log('身份识别结果:', userRole.value)
    } catch (err) {
      console.error('获取用户身份失败', err)
      userRole.value = 'undefined'
    }
  }
  onMounted(fetchUserRole)

  function handleManageCourse() {
    if (userRole.value === 'teacher') {
      // ✅ 教师可以跳转或打开管理界面
      router.push(`/course/${courseId}/manage`) // 示例跳转
      console.log(router)
    } else {
      // ❌ 非教师提示无权限
      showAlert('alert-danger', '权限不足！', 'fas fa-ban', '只有教师可以管理课程')
    }
  }

  function handleMyClass() {
    if (userRole.value === 'student') {
      // ✅ 教师可以跳转或打开管理界面
      router.push(`/course/${courseId}/class`) // 示例跳转
      console.log(router)
    } else {
      // ❌ 非下午提示无权限
      showAlert('alert-danger', '权限不足！', 'fas fa-ban', '只有学生可以查看班级')
    }
  }

  function showAlert(type, title, icon, message) {
    alertType.value = type
    alertTitle.value = title
    alertIcon.value = icon
    alertMessage.value = message

    setTimeout(() => {
      alertMessage.value = ''
    }, 3000)
  }
</script>

<style scoped>
  .nav-link {
    font-size: 1.2rem;
    font-weight: 500;
    color: #ffffff !important;
    padding: 10px 20px;
    border-radius: 6px;
    transition: background-color 0.3s, color 0.3s;
  }

  .router-link-exact-active {
    background-color: #ffffff !important;
    color: #007bff !important;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.3);
  }

  .navbar {
    width: 85%;
    margin: 60px auto;
  }

  .navbar-nav .nav-item-divider:not(:last-child) {
    position: relative;
  }
  .navbar-nav .nav-item-divider:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 30%;
    height: 40%;
    width: 1.5px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 1px;
  }
</style>
